<template>
  <div class="dropdown-container">
    <el-dropdown placement="bottom" trigger="click" :disabled="!showDropdown">
      <div class="dropdown-label">{{ label }}</div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="option in options" :key="option.value">
            {{ option.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

defineOptions({
  name: "Dropdown",
});

const props = defineProps<{
  label: string;
  options: {
    label: string;
    value: string;
  }[];
}>();

const showDropdown = computed(() => props.options.length > 0);
</script>

<style scoped lang="scss">
.dropdown-container {
  display: flex;
  align-items: center;
}

.dropdown-label {
  color: $menu-text-color;
  font-size: 12px;
  cursor: pointer;
}
</style>
